<template>
  <div>
    <el-card class="header-box">
      <div class="btn-box">
        <el-button size="mini" type="primary">导入</el-button>
        <el-button size="mini" type="primary" icon="el-icon-plus"
          >新增员工</el-button
        >
      </div>
    </el-card>

    <el-card>
      <div>{{ num }}</div>
      <el-table :data="userList" border style="width: 100%">
        <el-table-column  prop="companId" label="序号" width="150">
        </el-table-column>
        <el-table-column prop="username" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="mobile" label="手机号" width="120">
        </el-table-column>
        <el-table-column prop="workNumber" label="工号" width="120">
        </el-table-column>
        <el-table-column prop="formOfEmployment" label="聘用形势" width="120">
        </el-table-column>
        <el-table-column prop="departmentName" label="部门" width="120">
        </el-table-column>
        <el-table-column prop="correctionTime" label="入职时间" width="120">
        </el-table-column>
        <el-table-column
          :prop="inServiceStatus == 1 ? '在职' : '离职'"
          label="是否在职"
          width="120"
        >
        </el-table-column>
        <el-table-column
          :prop="enableState == 1 ? '可用' : '禁用'"
          label="状态"
          width="120"
        >
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看</el-button
            >
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }
      ],
      page: {
        page: 1, //页码
        size: 10 //页容量
      }
    }
  },

  created() {
    this.updatedUserList(this.page)
  },
  computed: {
    ...mapState('employees', ['userList']),
    num() {
      console.log('user', this.userList)
      return 1
    }
  },
  methods: {
    ...mapActions('employees', ['updatedUserList']),
    handleClick(row) {
      console.log(row)
    }
  }
}
</script>

<style scope lang='less'>
.header-box {
  position: relative;
  padding: 15px;

  .btn-box {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>